<template>
  <div>
    <div class="mainwrap">
      <!-- 中间部分的页面主体 -->

      <div class="middlewrap" v-if="data">
        <!-- <div class="search-navbar">
          <el-menu
            mode="horizontal"
            :default-active="$route.path"
            background-color="#303133"
            active-text-color="#c20c0c"
            text-color="#fff"
            :router="true"
          >
            <el-menu-item index="/search/searchplay">
              <i class="el-icon-video-play"></i>
              单曲
            </el-menu-item>
            <el-menu-item index="/search/searchlist">
              <i class="el-icon-copy-document"></i>
              专辑
            </el-menu-item>
            <el-menu-item index="/search/searchsinger">
              <i class="el-icon-user-solid"></i>
              歌手
            </el-menu-item>
            <el-menu-item index="/search/searchsong">
              <i class="el-icon-search"></i>
              歌曲
            </el-menu-item>
          </el-menu>
        </div> -->
        <search-navbar></search-navbar>
        <div class="search-rank">
          <div
            class="search-children"
            v-for="({ name, album, artists, duration }, id) in data.songs"
            :key="id"
          >
            <div>{{ name }}</div>
            <div>&lt;&lt;{{ album.name }}&gt;&gt;</div>
            <div>
              <router-link :to="`/singerdetails/${artists[0].id}`"
                >{{ artists[0].name }}
              </router-link>
            </div>
            <div>
              {{ Math.floor(duration / 1000 / 60) }}:{{
                Math.floor((duration / 1000) % 60) < 10
                  ? "0" + Math.floor((duration / 1000) % 60)
                  : Math.floor((duration / 1000) % 60)
              }}
            </div>
          </div>
        </div>
      </div>
      <!-- <router-view></router-view> -->
    </div>
  </div>
</template>

<script>
import searchNavbar from "@/components/searchNavbar.vue";
import { createLogger } from "vuex";
export default {
  components: { searchNavbar },
  props: {
    keywords: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      data: null,
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      //   const kw = this.$route.query.kw;
      const url = `/search?keywords=${this.keywords}`;
      console.log(url);
      this.axios.get(url).then((res) => {
        console.log(res);
        this.data = res.data.result;
      });
    },
  },
  watch: {
    keywords() {
      this.getData();
    },
  },
};
</script>

<style lang="scss" scoped>
.mainwrap {
  width: 100%;
  display: flex;
  justify-content: center;
}
.middlewrap {
  // position: absolute;
  // left: 50%;
  // margin-left: -490px;
  width: 980px;
  overflow: hidden;
  /* min-height: 1500px; */
  border: 1px solid #d3d3d3;
  border-width: 0 1px;
  background-color: #fff;
}
.search-rank {
  width: 90%;
  height: 1000px;
  margin: 0 auto;
}
.search-children {
  position: relative;
  height: 30px;
  border: 1px solid #fff;
  //   box-sizing: border-box;
  padding-left: 93px;
  line-height: 30px;
  font-size: 12px;
}
.search-children div {
  display: inline-block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #646464;
  font-family: "Times New Roman", Times, serif;
  cursor: pointer;
}
.search-children div:nth-child(1) {
  width: 120px;
}
.search-children div:nth-child(2) {
  width: 150px;
  position: absolute;
  left: 300px;
}
.search-children div:nth-child(3) {
  position: absolute;
  left: 530px;
  color: rgb(23, 125, 209);
}
.search-children div:nth-child(4) {
  position: absolute;
  left: 760px;
}
.search-children:nth-child(odd) {
  background-color: #f5f5f5;
}
.search-children:hover {
  background-color: #ececec;
  border: 1px solid #ccc;
}
.search-navbar {
  box-sizing: border-box;
  width: 90%;
  margin: 0 auto;
  background-color: #fff;
  border: 2px solid #ccc;
  margin-top: 5px;
}
.search-navbar li {
  box-sizing: border-box;
  display: inline-block;
  width: 25%;
  height: 39px;
  line-height: 37px;
  text-align: center;
  font-size: 14px;
  border: 2px solid #fff;
  cursor: pointer;
}
</style>